<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">扇形</block>
		</cu-custom>
		<form >
			<view class="cu-form-group margin-top">
				<view class="title" style="font-weight: 800;">请您输入任意两个数值进行计算</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">半径</view>
				<input placeholder="半径" name="r" v-model="r"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">弧长</view>
				<input placeholder="弧长" name="l" v-model="l"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">圆心角</view>
				<input placeholder="圆心角" name="a" v-model="a"></input>
			</view>
			<view class="cu-form-group">
				<button class="cu-btn bg-grey " @click="clear">清空</button>
				<button class="cu-btn  bg-blue" @click="submit">计算</button>
				
			</view>

		</form>
		<view class="cu-form-group margin-top align-start">
			<view class="title">结果</view>
			<textarea maxlength="-1"   v-model="result" disabled></textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {			
				r: '',
				l: '',
				a: '',
				c: '',
				h: '',
				sector_area: '',
				sector_circumference: '',
				arcuate_area: '',
				arcuate_circumference: '',
				angular_margin_area: '',
				result:''
			};
		},
		methods: {
			submit() {
				let data = null;
				if(this.r!="" && this.l!="")
					data = {
						r: parseFloat(this.r),
						l: parseFloat(this.l)
					};
				// if(this.area!="")
				// 	data = {
				// 		area: parseFloat(this.area)
				// 	};
				// if(this.circumference!="")
				// 	data = {
				// 		circumference: parseFloat(this.circumference)
				// 	};
				uni.request({
				    url: 'http://localhost:8000/api/sector', //仅为示例，并非真实接口地址。
					method:'POST',
				    data:data,
					dataType: 'json',
				    header: {
						'Content-Type': 'application/json;charset=UTF-8',
				    },
				    success: (res) => {
				        console.log(res.data);
						// this.diameter=res.data.diameter;
						// this.area=res.data.area;
						// this.circumference=res.data.circumference;
				        this.result = `扇形面积：${res.data.sector_area}\n扇形周长：${res.data.sector_circumference}\n弓形周长：${res.data.arcuate_circumference}`;
				    }
				});
				
			},
			clear(){
				this.r="";
				this.l="";
				this.a="";
				this.result="";
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
